<!-- 购买产品 -->
<template>
    <div>
        <div class="gathering_top_box">
            <div class="gathering_top_bg">
                <div v-if="money" class="gathering_money">￥{{money}}</div>
                <div class="gathering_dec color_95">请使用支付宝扫一扫扫描二维码</div>
            </div>
            <div class="gathering_top_qrcode">
                <div class="scan_code_boxs">
                        <!-- <qrcode :value="url" type="img" :size="code" class="gathering_qrcodes" ></qrcode> -->
                    <!-- <div id="qrcode" class="qrcode" ref="qrcodeRef" style="width: 200px;height: 200px;background-color: white;margin-top:20px;display"></div> -->
                    <qrcode-vue :value="url" :size="size" level="H" />
                    </div>
                <div class="gathering_bottom_bg theme_bg">
                    <!-- <img src="../../assets/wechat_pay_tips.png" class="wechat_pay_tips" alt=""> -->
                    长按识别或保存二维码
                </div> 
            </div>
            <div class="gathering_tips color_999">此二维码为时效二维码</div>
        </div>
    </div>
</template>

<script>
import { NavBar } from 'vant';
import { getCurrentInstance, ref } from 'vue';
import QrcodeVue from 'qrcode.vue'
export default {
    components:{
        [NavBar.name]:NavBar,
        QrcodeVue,
    },
    setup(){
      const { proxy } = getCurrentInstance();
      const money = proxy.$route.params.money == -1 ? '' : proxy.$route.params.money
      const title = proxy.$route.params.title
      const url = proxy.$route.params.url
      const size = ref("180");

      return{
        money,
        title,
        url,
        size,
      }
    }
}

</script>
<style scoped>
.gathering_top_box{
  padding: 25px;
    padding-top: 50px;
}
.gathering_top_bg{
  height: 161px;
  width: 100%;
  /* background:url("../../assets/gathering_background_image_top.png") center no-repeat; */
  background-size: 100% 100%;
  text-align: center;
}
.gathering_top_qrcode{
  height: 360px;
  width: 100%;
  background: #fff;
    position: relative;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}
.gathering_qrcodes{
/*  height: 400px;
  width: 400px;*/

  padding-top:50px;
  text-align: center;
}
.gathering_bottom_bg{
  position: absolute;
  left: 0;
  bottom: 0;
   height: 64px;
  width: 100%;
  border-radius: 50% 50% 0 0;

  /*background:url("../../assets/gathering_background_image_bottom.png") center no-repeat;*/
  /*background-size: 100% 100%;*/
   line-height: 64px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.gathering_tips{
  font-size: 14px;
  width: 100%;
  text-align: center;
  line-height: 60px;

}
.wechat_pay_tips{
  height: 25px;
  width: 25px;
  vertical-align: middle;

}
.gathering_money{
  line-height: 55px;
font-size: 18px;
color: #666666;

}
.gathering_dec{
  font-size: 14px;

}
.scan_code_boxs{
  height: 200px;
  width: 200px;
  margin:0 auto ;
}
</style>
